<template>
  <div style="width:100%; height: 100%">
    <div style="height: 100%;position: relative;overflow-y: auto;">
      <div class="transition-group" @touchstart="loadPosition"
           @touchend="changeEnd"
           style=" width: 100%;height: 100%;" ref="scrollOuter">
        <slot name="other"></slot>
        <transition-group :name="className" tag="div" style="position: relative">
          <slot>

          </slot>
        </transition-group>
      </div>

    </div>
    <button-to-top v-if="elements" :elements="elements"></button-to-top>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import ButtonToTop from "../ButtonToTop"

  export default {
    data () {
      return {
        className: 'goleft',
        elements: null
      }
    },

    props: {
      lengths: {
        type: Number,
        default: 1
      }
    },
    components: {
      ButtonToTop
    },
    mounted () {
      this.elements = this.$refs.scrollOuter
    },

    methods: {
      //记录位置手指放下的位置
      loadPosition (e)  {
        this.startX = e.changedTouches[0].clientX
        this.startY = e.changedTouches[0].clientY
        this.oldX = this.startX
        this.oldY = this.startY
      },
      //改变Activeindex
      changeEnd (e) {
        var endX = e.changedTouches[0].clientX
        var endY = e.changedTouches[0].clientY

        var X = endX - this.startX;
        var Y = endY - this.startY;
        if (Math.abs(X) > Math.abs(Y) && Math.abs(X) > 100 && this.startX > 50) {
          if (X > 0) {
            var index = Math.max(0, this.activeIndex - 1)
          } else {
            var lengths = this.lengths > 0 ? this.lengths : 1
            var index = Math.min(lengths - 1, this.activeIndex + 1)
          }
          this.$store.dispatch('cjy/changeClassifyIndex', index)
          var ggactive = this.$store.state.cjy.classifyIndex
        }
      },
      //手指移动
      changeMove (e)  {

        var newX = e.changedTouches[0].clientX
        var newY = e.changedTouches[0].clientY
        var moveX = newX - this.oldX
        var moveY = newY - this.oldY
        if (Math.abs(moveY) / Math.abs(moveX) > 1) {
          document.body.scrollTop = document.body.scrollTop - moveY
        }
        this.oldX = newX
        this.oldY = newY
      }
    },
    watch: {
      activeIndex (newData, oldData) {
        if (newData - oldData > 0) {
          this.className = "goleft"
        } else {
          this.className = "goright"
        }
      }
    },
    computed: {
      activeIndex () {
        return this.$store.state.cjy.classifyIndex
      }
    }
  }
</script>

<style scoped>
  .goleft-enter-active, .goleft-leave-active, .goright-enter-active, .goright-leave-active {
    transition: all 0.5s;
  }

  .goleft-enter, .goright-leave-to {
    transform: translatex(100%);
    opacity: 0.8
  }

  .goleft-leave-to, .goright-enter {
    transform: translatex(-100%);
    opacity: 0.8
  }
</style>
